<template>
  <div class="wx-video">
    <div>
      <button @click="createRoom">加入房间</button>
      <button @click="leaveRoom">退出房间</button>
      用户名：<span>{{ userId }}</span>
      <input type="text" v-model="roomId" />
    </div>
    <div id="video-grid" style="height: 100%; flex: 1">
      <!-- 主视频 -->
      <div
        id="main-video"
        class="video-box col-div"
        style="justify-content: flex-end"
      ></div>
      <!-- 小视频 -->
      <div
        class="video-box-1"
        style="background: red; width: 300px; height: 300px"
      ></div>
    </div>
  </div>
</template>


<script>
// import TrtcVideoCall from "@/utils/trtc-calling/index";
export default {
  data() {
    return {
      userId: "",
      roomId: "",
      trtcVideoCall: null,
    };
  },
  methods: {
    createRoom() {
      this.trtcVideoCall = new TrtcVideoCall({
        userId: this.userId,
        roomId: Number(this.roomId),
      });
    },
    leaveRoom() {
      this.trtcVideoCall.leave();
    },
  },
  mounted() {
    this.userId = "user_" + parseInt(Math.random() * 100000000);
    this.roomId = parseInt(Math.random() * 100000);
  },
};
</script>
<style lang="scss" scoped>
.wx-video,
.video-box {
  height: 500px;
  /deep/ div[id^="player"] {
    display: flex !important;
  }
  /deep/ video {
    width: 300px !important;
    height: 300px !important;
    position: inherit !important;
  }
}
</style>
